<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/base.css">
    <style>
        #content {
            margin-left: 150px;
            margin-top: 60px;
            border-left: 1px solid darkgray;
            padding: 60px 20px;
        }

        .list {
            padding: 6px;
        }

        .he {
            width: 400px;
        }

        .he:focus {
            border: 1px solid #5492f5;
        }

        h3 {
            margin-bottom: 50px;
            font-weight: bold;
        }

        .mybtn {
            margin-top: 30px;
            margin-left: 60px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="header">

            <ul class="layui-nav" lay-bar="disabled">
                <li class="layui-nav-item" lay-unselect="" style="color: #CFCEDC;font-size: 18px;">
                    <i><img src="/img/navimg.png" alt=""></i>问卷调查系统
                </li>
            </ul>
        </div>
        <div id="content">
            <h3>修改密码</h3>
            <div class="list"><span>旧密码：</span><input class="myinput-css he" v-model='oldpwd' type="password"></div>
            <div class="list"><span>新密码：</span><input class="myinput-css he" v-model='newpwd' type="password"></div>
            <button class="layui-btn layui-btn-normal mybtn" @click='commmit'>确定</button>
            <a href="/"><button class="layui-btn layui-btn-primary layui-border-blue mybtn">返回首页</button></a>
        </div>
    </div>

    <script src="/js/axios.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    oldpwd: '',
                    newpwd: ''
                }
            },
            methods: {
                commmit: function () {
                    if (this.oldpwd.trim() && this.newpwd.trim()) {
                        axios.post('/home/updateinfo', {
                            oldpwd: this.oldpwd,
                            newpwd: this.newpwd
                        }).then(res => {
                            res = res.data;
                            if (res.code === 200) {
                                layer.msg(res.msg, {
                                    offset: 't',
                                    icon: 6
                                });

                            } else {
                                layer.msg(res.msg, {
                                    offset: 't',
                                    icon: 5
                                });
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        layer.msg('新旧密码不能为空', {
                            offset: 't',
                            icon: 5
                        });
                    }

                }
            },
        })
    </script>
</body>

</html>